<route lang="yaml">
meta:
  layout: layout_login
</route>

<template>
  <div class="container">
    <div class="zhuce">
      <p>Register</p>
    </div>

    <div id="loginPage">
      <form @submit.prevent="register" id="registerForm">
        <!-- 选择角色 -->
        <div>
          <select v-model="userRole" id="userRole" class="select">
            <option value="" disabled selected>请选择您的身份</option>
            <option value="jobSeeker">求职者</option>
            <option value="recruiter">招聘者</option>
          </select>
        </div>

        <!-- 注册邮箱表单 -->
        <input type="email" v-model="email" id="email" placeholder="QQ邮箱" required>

        <!-- 密码表单 -->
        <input type="password" v-model="password" id="registerPassword" placeholder="密码" required>

        <!-- 再次输入密码表单 -->
        <input type="password" v-model="confirmPassword" id="confirmPassword" placeholder="确认密码" required>

        <!-- 注册电话表单 -->
        <input type="text" v-model="telephone" id="tele" placeholder="联系电话" required>

        <!-- 注册地址表单 -->
        <input type="text" v-model="address" id="address" placeholder="地址" required>

        <!-- 注册按钮 -->
        <button type="button" id="registerBtn" @click="register">注册</button>
        <br>
        <router-link to="/login" class="login-link">已有账号，去登录</router-link>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const email = ref('');
const password = ref('');
const userRole = ref('');

const register = async () => {
  try {
    // 获取用户输入的邮箱、密码和确认密码
    const role = document.getElementById("userRole");
    const emailInput = document.getElementById('email');
    const passwordInput = document.getElementById('registerPassword');
    const confirmPasswordInput = document.getElementById('confirmPassword');
    const telephoneInput = document.getElementById('tele');
    const addressInput = document.getElementById('address');

    // 检查用户是否选择了身份
    if (!userRole.value) {
      alert('请选择您的身份');
      return;
    }

    // 检查邮箱格式是否正确
    const emailPattern = /^[1-9]\d{4,10}@qq\.com$/;
    if (!emailPattern.test(emailInput.value)) {
      alert('邮箱格式错误');
      return;
    }

    // 检查密码和确认密码是否一致
    if (passwordInput.value !== confirmPasswordInput.value) {
      alert('两次密码输入不一致');
      return;
    }
    let table;
    // 发送POST请求到FastAPI接口
    if (role.value === "jobSeeker"){
      table = 'http://127.0.0.1:8000/register'
    }
    else{
      table = 'http://127.0.0.1:8000/finder_register'
    }
    const response = await fetch(table, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({  //这里的属性对应的是schemas里的属性
        Email: email.value,
        Password: password.value,
        Role: role.value,
        Tele: telephoneInput.value,
        Address: addressInput.value
      })
    });

    // 处理响应
    const data = await response.json();
    console.log(data);

    // 注册成功提示并跳转到登录页面
    if (response.ok) {
      alert('注册成功，即将跳转到登录界面');
      window.location.href = 'login'; // 假设登录页面的文件名为login.html
    } else {
      alert("该账号已存在");
    }
  } catch (error) {
    console.error('There was a problem with the fetch operation:', error.message);
    // 处理错误情况，例如显示错误提示给用户
  }
};
</script>



<style scoped>
.container {
  background-image: url(@/assets/login/bg3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  font-family: Arial;
  text-align: center;
  height: 100%;
  width: 100%;
}

.zhuce {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
}

.zhuce p {
  font-size: 8em;
  margin-top: 10px;
  margin-bottom: 230px;
  color: rgba(255, 255, 255, 0.3);
  background-image: url(@/assets/login/water.png);
  letter-spacing: 8px;
  -webkit-background-clip: text;
  font-weight: 800;
  animation: wave 30s linear infinite;
}

@keyframes wave {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 1000px 0;
  }
}


#loginPage {
  background-color: #00000000;
  text-align: center;
  width: 380px;
  margin: auto;
  padding: 20px;
  border-radius: 5px;
  position: relative; /* 添加相对定位 */
  top: 58%; /* 上移一半高度 */
  transform: translateY(-50%); /* 使用transform垂直居中 */
}


input[type="email"],
input[type="password"],
input[type="text"],
select,
button {
  font-size: 20px;
  color: #02dffd;
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  background-color: #00000080;
  border: 1px solid #00000080;
  border-radius: 20px;
  box-sizing: border-box;
}


button {
  color: #1ebac5;
  font-size: 16px;
}

button:hover {
  background-color: #fb752dd2;
  cursor: pointer;
}

.login-link {
  color: #ccc; /* 灰白色 */
  text-decoration: underline; /* 下划线 */
}

/* 添加下拉提示符样式 */
.select::after {
  content: '\25BC'; /* Unicode 下拉箭头符号 */
  position: absolute;
  right: 10px; /* 调整箭头位置 */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 禁止点击事件传递到下拉箭头 */
  color: #62cf08; /* 下拉箭头颜色 */
}

</style>
